Advanced Grid Playground

Below, we’ve included an HTML workspace with the solution code from the last workspace. Here, there’s no determined exercise for you to perform, but feel free to use it as a playground to practice your Advanced Grid skills!

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

Default file path:
Workspace type: html-live
Opened files (when workspace is loaded): n/a

Advanced Grid Summary

Advanced Grid Recap

The fr unit represents a fraction of the available space in the grid container.

The repeat() notation can be used to quickly layout many tracks for large grids. For example:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Could be written with repeat notation like this:

grid-template-columns: repeat(7, 1fr);

The grid-auto-rows property can be used to generate the number of rows based on the content and available space. The following code:

grid-auto-rows: minmax(100px, auto);

Would create rows that are at least 100px tall and can be as tall as the content inside them demands.

Advanced Grid Further Research

Further Research

For even more control over how your content is laid out, check out this article titled How Items Flow Into a CSS Grid.

Next Concept